<template>
	<div>
		<div class='prizeDrawSpace'>
	
		</div>
	<div class="prizeDraw">
		<div class="prizeDraw_top">
			<div class="prizeDraw_top_close">
				<div class class="prizeDraw_top_close_left">
					<image src="@/static/image/left.png" mode="" @click="backEvent()"></image>
				</div> 中奖名单 <image src="@/static/image/close.png" mode="" class="closeImg" @click="closeDialog()"></image>
			</div>
			<div class="prizeDraw_top_title">
				活动名称：{{activtName || ''}}
			</div>
			<scroll-view @scrolltolower="scrolltolower" :style="{height:scrollViewHeight+'rpx'}" :scroll-y="true"
				:scroll-with-animation="true">
				<div class="prizeDraw_user_item" v-for="(ite,idx) in WinPrizeList" :key='idx'>
					<div class='prizeDraw_user_item_top'>
						<div class='prizeDraw_user_item_top_left'>
							<image
								:src="ite.avatar || 'https://weilebo-img.oss-cn-hangzhou.aliyuncs.com/vlebo/defaultavatar.png'"
								mode=""></image>
						</div>
						<div class='prizeDraw_user_item_top_title'>
							{{ite.nickname}}
						</div>
					</div>
					<div class="prizeDraw_items_cont_items">
						<div class="prizeDraw_items_cont_items_left">
							中奖内容：<div class="prizeDraw_items_cont_items_cont ex">{{ite.prizeName}}</div>
						</div>
					</div>
					<div class="prizeDraw_items_cont_items" v-if="checkType == 1">
						<div class="prizeDraw_items_cont_items_left">
							核销状态：<div class="prizeDraw_items_cont_items_left_a ex color_blue">未核销</div>
						</div>
						<div class="prizeDraw_items_cont_items_left">
							核销码：<div class="prizeDraw_items_cont_items_left_a ex ">{{ite.checkCode}}</div>
						</div>
					</div>
					<div class="prizeDraw_items_cont_items" v-else>
						<div class="prizeDraw_items_cont_items_left">
							用户姓名：<div class="prizeDraw_items_cont_items_left_a ex color_blue">{{ite.username}}</div>
						</div>
						<div class="prizeDraw_items_cont_items_left">
							手机号：<div class="prizeDraw_items_cont_items_left_a ex ">{{ite.mobile}}</div>
						</div>
					</div>
					<div class="prizeDraw_items_cont_items" v-if="checkType == 1">
						<div class="prizeDraw_items_cont_items_left">
							核销时间：<div class="prizeDraw_items_cont_items_cont ex">{{ite.checkTime}}</div>
						</div>
					</div>
					<div class="prizeDraw_items_cont_items" v-else>
						<div class="prizeDraw_items_cont_items_left">
							地址：<div class="prizeDraw_items_cont_items_cont ex">{{ite.address}}</div>
						</div>
					</div>

				</div>
				<div class="listSpace" v-if="WinPrizeList.length <= 0 && loading">
					<list-space></list-space>
				</div>
				
				<div class="zj_space">

				</div>
			</scroll-view>
		</div>
	</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				params: {
					page: 1,
					pageSize: 10,
					id: ''
				},
				WinPrizeList: [],
				scrollViewHeight: 812,
				total: 0,
				liveName: '',
				checkType: 0,
				loading:false
			}
		},
		onLoad(opt) {
			this.params.id = opt.drawActivityId
			this.checkType = opt.checkType
			this.activtName = opt.activtName
			this.getDrawWinPrizeCustomer()
		},
		onPullDownRefresh() {
			this.params.page = 1
			this.WinPrizeList = []
			this.loading = false
			this.getDrawWinPrizeCustomer()
		},
		methods: {
			closeDialog(){
				this.$utils.closeDialog(this)
				// uni.navigateBack()
			},
			scrolltolower(e) {
				if (this.WinPrizeList.length < this.total) {
					this.params.page++
					this.getDrawWinPrizeCustomer()
				} else {
					uni.showToast({
						title: '已到底',
						icon: 'none'
					})
				}
				console.log('e.detail.scrollTop', e.detail.scrollTop)
			},
			async getDrawWinPrizeCustomer() {
				const {
					data
				} = await this.$request(this.$Api.drawWinPrizeCustomer + "/" + this.params.id, this.params, "get")
				console.log(data.data)
				this.loading = true
				if(!data.data) return
				data.data.forEach((item) => {
					const addressTotal = item.address.split('/');
					item.username = addressTotal[0];
					item.mobile = addressTotal[1];
					item.address = addressTotal.length === 3 ? addressTotal[2] : '-';
				});
				this.WinPrizeList = this.WinPrizeList.concat(data.data)
				this.liveName = data.data[0].liveName || ''
				this.total = data.total
				uni.stopPullDownRefresh()
			},
			// 中奖名单
			winnersEvemt(ite) {

			},
			backEvent() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
	.prizeDraw {
		width: 100%;
		height: 992rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 0rpx 0rpx;
		overflow-y: hidden;
		// position: fixed;
		bottom: 0;
		left: 0;
		padding: 0 32rpx;
		box-sizing: border-box;
		color: #464C5B;
		font-size: 28rpx;

		.prizeDraw_top {
			width: 100%;
			height: 100rpx;
			position: relative;
			text-align: center;
			font-size: 32rpx;
			line-height: 100rpx;

			.prizeDraw_top_close_left {
				position: absolute;
				left: 0;
				top: 10rpx;
				width: 44rpx;
				height: 44rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}


			.closeImg {
				position: absolute;
				right: 0;
				top: 32rpx;
				width: 32rpx;
				height: 32rpx;
			}

		}

		.prizeDraw_top_title {
			width: 100%;
			height: 80rpx;
			font-size: 28rpx;
			color: #464C5B;
			text-align: left;
			font-weight: 500;
			line-height: 80rpx;
		}

		.prizeDraw_user_item {
			width: 100%;
			height: 310rpx;
			background: #F6F9FF;
			border-radius: 8rpx;
			margin-bottom: 20rpx;
		}

		.prizeDraw_user_item_top {
			width: 100%;
			height: 110rpx;
			border-bottom: 1rpx solid #D7DDE4;
			display: flex;
			justify-content: flex-start;
			padding: 0 24rpx;
			box-sizing: border-box;
			align-items: center;

			.prizeDraw_user_item_top_left {
				width: 62rpx;
				height: 62rpx;
				margin-right: 16rpx;

				image {
					border-radius: 50%;
				}
			}

		}

		.prizeDraw_items_cont_items {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 40rpx;
			margin-top: 20rpx;
			padding: 0 24rpx;
			box-sizing: border-box;
			font-size: 24rpx;

			color: #8C8C8C;

			.prizeDraw_items_cont_items_left {
				width: 100%;
				display: flex;
				align-items: center;


				.color_blue {
					color: #295EFF;
				}

				.prizeDraw_items_cont_items_cont {
					width: 480rpx;
					text-align: left;
					color: #464C5B;
				}
			}


		}


	}
</style>